<template>
  <view class="index">
    <u-form ref="form1" :model="form1">
      <u-form-item label="户口:" labelWidth="70" prop="area" borderBottom>
        <u-radio-group v-model="form1.isCity">
          <u-radio label="城镇" :name="1" :customStyle="{ marginRight: '40rpx' }"></u-radio>
          <u-radio label="农村" :name="0"></u-radio>
        </u-radio-group>
      </u-form-item>

      <u-form-item label="所在市:" labelWidth="70" prop="area" borderBottom>
        <u-input v-model="form1.city" disabledColor="#fff" placeholder="南昌市" border="none" fontSize="18"></u-input>
      </u-form-item>
      <u-form-item label="县/区:" labelWidth="70" prop="area" borderBottom>
        <u-input v-model="form1.county" disabledColor="#fff" placeholder="进贤县" border="none" fontSize="18"></u-input>
      </u-form-item>
      <u-form-item label="镇/街办:" labelWidth="70" prop="area" borderBottom>
        <u-input v-model="form1.town" disabledColor="#fff" placeholder="蛟桥镇" border="none" fontSize="18"></u-input>
      </u-form-item>
      <u-form-item label="所在村:" labelWidth="70" prop="area" borderBottom>
        <u-input v-model="form1.village" disabledColor="#fff" placeholder="无名村" border="none" fontSize="18"></u-input>
      </u-form-item>
    </u-form>

    <view class="submit">
      <u-button @click="submit" type="primary" text="下一步"></u-button>
    </view>
  </view>
</template>

<script>
import { mapState, mapMutations } from "vuex"
export default {
  data: () => ({
    form1: {
      isCity: 1,
      city: "",
      county: "",
      town: "",
      village: "",
      questionnaire_number: "",
    },
  }),
  computed: {
    ...mapState(["mainInfo"]),
  },

  onLoad() {},

  methods: {
    ...mapMutations(["setMainInfo"]),

    async submit() {
      if (this.form1.city && this.form1.county && this.form1.town && this.form1.village) {
        this.setMainInfo(this.form1)
        uni.navigateTo({ url: "/pages/research/research" })
      } else {
        uni.$u.toast("请认真填写")
      }
    },
  },
}
</script>

<style lang="scss" scoped>
view {
  box-sizing: border-box;
}

.index {
  display: flex;
  // justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 20%;

  .submit {
    margin-top: 100rpx;
    width: 70%;
  }
}
</style>
